<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ maptitle }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <dv-border-box-13>
        <el-row>
          <el-col>
            <div id="country" class="quanguo" @click="getData('china')" v-if="code !== 'china'">
              中国
            </div>
          </el-col>
          <el-col>
            <div id="province" class="quanguo2" @click="getData(codep)" style="display: none;" v-if="code !== 'china'">
              <div id="provincet">省名</div>
            </div>
            <div id="city" class="quanguo1" @click="getData(codec)" style="display: none;" v-if="code !== 'china'">
              <div id="cityt">市名</div>
            </div>
          </el-col>
          <el-col>
            <div id="county" class="quanguo0" @click="getData(codect)" style="display: none;" v-if="code !== 'china'">
              <div id="countyt">镇乡</div>
            </div>
          </el-col>
        </el-row>
        <Echart id="CenterMap" :options="options" ref="CenterMap" />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules";
import * as echarts from "echarts";
import { GETNOBASE } from "api";
export default {
  props: ['parentData','customerInfo'],
  data() {
    return {
      maptitle: "客户分布",
      options: {},
      code: "china", //china 代表中国 其他地市是行政编码
      codep: "",
      codec: "",
      codect: "",
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
      mapName: "",
      // hostIP: "localhost",
      hostIP: "116.54.4.93",
    };
  },
  created() {},
  watch: {
    parentData(newVal) {
      console.log('地图中心-子组件的数据已更新:', newVal);
      this.changeMap();
    },
  },
  mounted() {
    this.getData("china");
  },
  methods: {
    changeMap(){
      let mapCode = "";
      if(this.parentData=="云南上云丰花卉有限公司"||this.parentData=="电商"||this.parentData=="洋丽人"||this.parentData=="何文丽"||this.parentData=="省外"){
        mapCode = "china";
        this.mapName = "中华人民共和国";
      }else if(this.parentData=="销售部"){
        // mapCode = "530000";
        mapCode = "china";
        this.mapName = "云南省";
      }else if(this.parentData=="玉溪片区"){
        // mapCode = "530400";
        mapCode = "530000";
        this.mapName = "玉溪市";
      }else if(this.parentData=="楚雄片区"){
        // mapCode = "532300";
        mapCode = "530000";
        this.mapName = "楚雄彝族自治州";
      }else if(this.parentData=="安宁片区"){
        // mapCode = "530181";
        mapCode = "530000";
        this.mapName = "安宁市";
      }else if(this.parentData=="嵩明片区"){
        // mapCode = "530127";
        mapCode = "530000";
        this.mapName = "嵩明县";
      }else if(this.parentData=="晋宁片区"){
        // mapCode = "530115";
        mapCode = "530000";
        this.mapName = "晋宁区";
      }else if(this.parentData=="宜良片区"){
        // mapCode = "530125";
        mapCode = "530000";
        this.mapName = "宜良县";
      }else if(this.parentData=="呈贡片区"){
        // mapCode = "530114";
        mapCode = "530000";
        this.mapName = "呈贡区";
      }else if(this.parentData=="石林片区"){
        // mapCode = "530126";
        mapCode = "530000";
        this.mapName = "石林彝族自治县";
      }
      this.getData(mapCode);
    },
    getData(code) {
      let url = "http://"+this.hostIP+":9500/api/bigscreen/getZoneData?parent="+code;
      axios.get(url,{ withCredentials: true }) // 使用 params 参数传递查询参数
      axios.get(url) // 使用 params 参数传递查询参数
        .then(res => {
          this.getGeojson(code, res.data);
          this.mapclick();
        });
    },
    /**
     * @description: 获取geojson
     * @param {*} name china 表示中国 其他省份行政区编码
     * @param {*} mydata 接口返回列表数据
     * @return {*}
     */
    async getGeojson(name, mydata) {
      if(name!='china'){
        let url = "http://"+this.hostIP+":9500/api/bigscreen/getZoneInfo?code="+name;
        axios.get(url,{ withCredentials: true }) // 使用 params 参数传递查询参数
          .then(res => {
            document.getElementById("province").style.display = "none";
            document.getElementById("city").style.display = "none";
            document.getElementById("county").style.display = "none";
            if(res.data.item.rank=="province"){
              // document.getElementById("provincet").innerHTML = res.data.parent.name.slice(0, 2);
              // document.getElementById("province").style.display = "block";
              this.codep = res.data.item.code;
            }else if(res.data.item.rank=="city"){
              document.getElementById("provincet").innerHTML = res.data.parent.name.slice(0, 2);
              document.getElementById("province").style.display = "block";
              this.codec = res.data.item.code;
            }else if(res.data.item.rank=="county"){
              document.getElementById("province").style.display = "block";
              document.getElementById("cityt").innerHTML = res.data.parent.name.slice(0, 2);
              document.getElementById("city").style.display = "block";
              this.codect = res.data.item.code;
            }else if(res.data.item.rank=="district"){
              document.getElementById("province").style.display = "block";
              document.getElementById("city").style.display = "block";
              document.getElementById("countyt").innerHTML = res.data.parent.name.slice(0, 2);
              document.getElementById("county").style.display = "block";
              this.codect = res.data.parent.code;
            }
          });
      }else{
        this.mapName = "中华人民共和国";
      }
      this.code = name;
      //如果要展示南海群岛并且展示的是中国的话
      let geoname = name
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }
      //如果有注册地图的话就不用再注册了
      let mapjson = echarts.getMap(name);
      if (mapjson) {
        mapjson = mapjson.geoJSON;
      } else {
        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
          return res;
        });
        echarts.registerMap(name, mapjson);
      }

      let cityCenter = {};
      let arr = mapjson.features;
      //根据geojson获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] =
          item.properties.centroid || item.properties.center;
      });
      arr.map((item) => {
        //console.log(item.properties.adcode,"--------",item.properties.name)
      });
      let newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
          newData.push({
            name: item.name,
            value: cityCenter[item.name].concat(item.value),
          });
        }
      });
      let points = [];
      if(this.parentData!="云南上云丰花卉有限公司"&&this.parentData!="电商"&&this.parentData!="洋丽人"&&this.parentData!="何文丽"&&this.parentData!="何文丽"){
        let url = "http://"+this.hostIP+":9500/api/bigscreen/getVisitRecord?area="+this.parentData;
        axios.get(url,{ withCredentials: true }) // 使用 params 参数传递查询参数
          .then(res => {
            this.init(name, mydata, newData,this.mapName,res.data);
          });
      }else{
        this.init(name, mydata, newData,this.mapName,points);
      }
    },
    init(name, data, data2,mapName,points) {
      let showVMap = true;
      if(name!="china"){
        if(name.substring(4,6)!="00"){
          showVMap = false;
        }else{
          showVMap = true;
        }
      }
      let top = 45;
      let zoom = 1.15;
      if(name=="china"){
        zoom = 1.15;
      }else if(name=="530000"){
        zoom = 2;
      }else{
        if(name.substring(2,4)!='00'){
          if(name.substring(4,6)!='00'){
            zoom = 5;
          }else{
            zoom = 4;
          }
        }else{
          zoom = 2;
        }
      }
      let option = {};
      if(name!="china"){
        option = {
          title:{
            text: mapName, // 主标题
            left: '10px', // 标题水平位置
            top: '15px', // 标题垂直位置
            textStyle: { // 标题样式
              fontSize: 12,
              color: 'aqua'
            },
          },
          backgroundColor: "rgba(0,0,0,0)",
          tooltip: {
            show: false,
          },
          legend: {
            show: false,
          },
          geo: {
            map: name,
            roam: true,
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            top: top,
            data: data,
            itemStyle: {
              normal: {
                areaColor: '#eeeeee', // 默认区域颜色
                // areaColor: "rgba(255,255,255,.1)",
                borderColor: "purple",
                borderWidth: 1 // 区域边框宽度
              },
            },
            label: {
              show: true,
              color: "green",
              formatter: function (val) {
                return [val.name.slice(0, 2),val.value].join(" ");
              },
            },
            emphasis: {
              disabled: true,          // 5.0+ 直接禁用高亮
              itemStyle: {
                areaColor: null,       // 区域颜色保持原样
                borderColor: null,     // 边框保持原样
                borderWidth: null
              },
              label: {
                show: null,            // 文字保持原样
                color: null
              }
            }
          },
          series: [
            {
              type: 'scatter',        // effectScatter scatter
              coordinateSystem: 'geo',      // 默认 geoIndex: 0
              geoIndex: 0,
              data: points.map(item =>({
                name:item.cname,
                value: [Number(item.xzb), Number(item.yzb), 0],
                extraInfo: "客户姓名: <span style='color:aqua;'>"+item.cname+"</span><br/>客户地址: <span style='color:aqua;'>"+item.address+"</span><br />所属片区: <span style='color:aqua;'>"+item.area+"</span><br />销售人员: <span style='color:aqua;'>"+item.saleman+"</span><br />行政辖区: <span style='color:aqua;'>"+item.county+"</span><br />所属街道: <span style='color:aqua;'>"+item.district+"</span><br />种植信息: <span style='color:aqua;'>"+item.desc+"</span><br />标注日期: <span style='color:aqua;'>"+item.visittime+"</span>",
                itemStyle: {
                  color:item.color,
                  borderColor: item.color
                },
              })),
              symbol: 'path://M440.852 889.4c-106.412-87.345-223.734-106.861-292.745-109.505v0.619c-10.877 0.823-19.389 9.851-19.389 20.866s8.513 20.043 19.319 20.861c0.52 0.005 0.858-0.22 1.308-0.22 126.547 1.406 217.378 59.955 264.735 99.494l0.45-0.506c3.803 4.229 9.283 6.887 15.383 6.919 2.91 1.799 6.526 2.864 10.389 2.864 11.369 0 20.585-9.217 20.585-20.585 0-11.235-9.001-20.369-20.186-20.581l0.148-0.225zM871.954 780.233v-0.675c-69.067 2.644-186.277 22.16-292.52 109.392l0.225 0.225c-6.18 3.616-10.264 10.22-10.264 17.779 0 11.338 9.19 20.528 20.528 20.528 0.168 0 0.336-0.002 0.502-0.007 6.099-0.035 11.587-2.732 15.345-6.991l0.434 0.579c47.3-39.426 137.963-97.975 264.51-99.438 0.394 0.056 0.787 0.281 1.181 0.281 0.007 0 0.019 0 0.028 0 11.509 0 20.838-9.33 20.838-20.838 0-11.498-9.314-20.822-20.808-20.838zM781.965 615.498l1.294 0.731s142.069-164.51 93.869-397.131c-0.056-0.337 0.113-0.337 0-0.675l-0.281-0.787c-0.394-1.913-0.563-3.768-1.012-5.68l-0.9 0.056c-4.218-12.092-10.124-17.66-10.629-18.166-3.787-4.387-9.355-7.148-15.568-7.148-0.142 0-0.285 0.002-0.427 0.005-1.553 0.056-2.96 0.675-4.366 1.068l-0.056-0.169s-91.226 3.993-190.663 55.849c-42.255-99.638-112.141-180.697-200.037-235.625 69.641 51.385 64.539 48.843 58.843 48.843-0.011 0-0.022 0-0.034 0s-2.867 0.225-6.297 1.406c-6.345 1.193-11.562 5.204-14.381 10.654-19.139 14.88-86.968 75.397-121.557 170.504-101.293-51.35-194.207-53.431-194.207-53.431l-0.281 0.9c-5.849 0.289-11.015 2.989-14.561 7.12-0.287 0.079-6.586 6.153-10.916 19.371h-0.337l-0.394 2.081c-0.281 1.069-0.675 1.8-0.956 2.869-0.281 1.294 0.113 1.575 0 2.587-47.975 232.451 93.925 396.737 93.925 396.737l1.069-0.562c62.208 73.776 153.502 121.321 255.973 124.823-8.786 0.542-9.236 1.329-9.236 2.286v191.676c0 0 0 0 0 0 0 11.525 9.342 20.866 20.866 20.866 11.525 0 20.866-9.342 20.866-20.866 0 0 0 0 0 0v-191.676c0-0.9-0.394-1.631-0.506-2.531 103.93-5.673 195.108-55.842 255.505-131.629zM512 700.931c-91.957-0.034-174.48-40.4-230.843-104.367-131.868-152.1-102.003-324.485-91.54-368.353 96.907 9.393 182.845 59.28 182.845 59.28l0.394-1.013 3.15 0.788c1.856 0.731 2.813 2.025 5.624 2.025 0 0 7.987-1.631 12.823-10.629 2.465-3.205 4.006-7.235 4.167-11.617 6.069-17.011 37.228-98.732 113.38-160.824 0 0 75.253 67.773 110.855 170.866l1.969 2.588c3.655 6.355 10.461 10.686 18.335 10.517 1.406-0.056 2.756-0.619 4.049-0.956l0.45 0.056s1.294-0.056 3.206-0.506l0.619 1.294s86.108-50.956 184.87-60.461c10.854 47.637 36.952 215.635-91.17 364.341-56.778 65.651-140.185 106.951-233.24 106.974z',
              symbolSize: 15,
              tooltip: {
                show: true,
                formatter: function (params) {
                  return params.data.extraInfo
                },
                backgroundColor: "rgba(0,0,0,.6)",
                borderColor: "rgba(147, 235, 248, .8)",
                textStyle: {
                  color: "#FFF",
                },
              },
              label: {
                show: false,
                formatter: function (param) {
                  const data = param.data;
                  return `${data.name}`; 
                },
                position: 'top',
                color: 'gray', // #12E3AA-亮绿色  4CC7FF-蓝色 7E97FF-紫色 FFBF00-黄色 FF983F-橙色  FF6968-红色 EA7864-棕色
                fontSize: 8
              },
            },
          ],
        };
      }else{
        if(this.parentData=="省外"){
          option = {
          title:{
            text: mapName, // 主标题
            left: '10px', // 标题水平位置
            top: '15px', // 标题垂直位置
            textStyle: { // 标题样式
              fontSize: 12,
              color: 'aqua'
            },
          },
          backgroundColor: "rgba(0,0,0,0)",
          tooltip: {
            show: false,
          },
          legend: {
            show: false,
          },
          geo: {
            map: name,
            roam: true,
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            top: top,
            data: data,
            itemStyle: {
              normal: {
                areaColor: '#eeeeee', // 默认区域颜色
                // areaColor: "rgba(255,255,255,.1)",
                borderColor: "purple",
                borderWidth: 1 // 区域边框宽度
              },
            },
            label: {
              show: true,
              color: "green",
              formatter: function (val) {
                return [val.name.slice(0, 2),val.value].join(" ");
              },
            },
            emphasis: {
              disabled: true,          // 5.0+ 直接禁用高亮
              itemStyle: {
                areaColor: null,       // 区域颜色保持原样
                borderColor: null,     // 边框保持原样
                borderWidth: null
              },
              label: {
                show: null,            // 文字保持原样
                color: null
              }
            }
          },
          series: [
            {
              type: 'scatter',        // effectScatter scatter
              coordinateSystem: 'geo',      // 默认 geoIndex: 0
              geoIndex: 0,
              data: points.map(item =>({
                name:item.cname,
                value: [Number(item.xzb), Number(item.yzb), 0],
                extraInfo: "客户姓名: <span style='color:aqua;'>"+item.cname+"</span><br/>客户地址: <span style='color:aqua;'>"+item.address+"</span><br />所属片区: <span style='color:aqua;'>"+item.area+"</span><br />销售人员: <span style='color:aqua;'>"+item.saleman+"</span><br />行政辖区: <span style='color:aqua;'>"+item.county+"</span><br />所属街道: <span style='color:aqua;'>"+item.district+"</span><br />种植信息: <span style='color:aqua;'>"+item.desc+"</span><br />标注日期: <span style='color:aqua;'>"+item.visittime+"</span>",
                itemStyle: {
                  color:item.color,
                  borderColor: item.color
                },
              })),
              symbol: 'path://M440.852 889.4c-106.412-87.345-223.734-106.861-292.745-109.505v0.619c-10.877 0.823-19.389 9.851-19.389 20.866s8.513 20.043 19.319 20.861c0.52 0.005 0.858-0.22 1.308-0.22 126.547 1.406 217.378 59.955 264.735 99.494l0.45-0.506c3.803 4.229 9.283 6.887 15.383 6.919 2.91 1.799 6.526 2.864 10.389 2.864 11.369 0 20.585-9.217 20.585-20.585 0-11.235-9.001-20.369-20.186-20.581l0.148-0.225zM871.954 780.233v-0.675c-69.067 2.644-186.277 22.16-292.52 109.392l0.225 0.225c-6.18 3.616-10.264 10.22-10.264 17.779 0 11.338 9.19 20.528 20.528 20.528 0.168 0 0.336-0.002 0.502-0.007 6.099-0.035 11.587-2.732 15.345-6.991l0.434 0.579c47.3-39.426 137.963-97.975 264.51-99.438 0.394 0.056 0.787 0.281 1.181 0.281 0.007 0 0.019 0 0.028 0 11.509 0 20.838-9.33 20.838-20.838 0-11.498-9.314-20.822-20.808-20.838zM781.965 615.498l1.294 0.731s142.069-164.51 93.869-397.131c-0.056-0.337 0.113-0.337 0-0.675l-0.281-0.787c-0.394-1.913-0.563-3.768-1.012-5.68l-0.9 0.056c-4.218-12.092-10.124-17.66-10.629-18.166-3.787-4.387-9.355-7.148-15.568-7.148-0.142 0-0.285 0.002-0.427 0.005-1.553 0.056-2.96 0.675-4.366 1.068l-0.056-0.169s-91.226 3.993-190.663 55.849c-42.255-99.638-112.141-180.697-200.037-235.625 69.641 51.385 64.539 48.843 58.843 48.843-0.011 0-0.022 0-0.034 0s-2.867 0.225-6.297 1.406c-6.345 1.193-11.562 5.204-14.381 10.654-19.139 14.88-86.968 75.397-121.557 170.504-101.293-51.35-194.207-53.431-194.207-53.431l-0.281 0.9c-5.849 0.289-11.015 2.989-14.561 7.12-0.287 0.079-6.586 6.153-10.916 19.371h-0.337l-0.394 2.081c-0.281 1.069-0.675 1.8-0.956 2.869-0.281 1.294 0.113 1.575 0 2.587-47.975 232.451 93.925 396.737 93.925 396.737l1.069-0.562c62.208 73.776 153.502 121.321 255.973 124.823-8.786 0.542-9.236 1.329-9.236 2.286v191.676c0 0 0 0 0 0 0 11.525 9.342 20.866 20.866 20.866 11.525 0 20.866-9.342 20.866-20.866 0 0 0 0 0 0v-191.676c0-0.9-0.394-1.631-0.506-2.531 103.93-5.673 195.108-55.842 255.505-131.629zM512 700.931c-91.957-0.034-174.48-40.4-230.843-104.367-131.868-152.1-102.003-324.485-91.54-368.353 96.907 9.393 182.845 59.28 182.845 59.28l0.394-1.013 3.15 0.788c1.856 0.731 2.813 2.025 5.624 2.025 0 0 7.987-1.631 12.823-10.629 2.465-3.205 4.006-7.235 4.167-11.617 6.069-17.011 37.228-98.732 113.38-160.824 0 0 75.253 67.773 110.855 170.866l1.969 2.588c3.655 6.355 10.461 10.686 18.335 10.517 1.406-0.056 2.756-0.619 4.049-0.956l0.45 0.056s1.294-0.056 3.206-0.506l0.619 1.294s86.108-50.956 184.87-60.461c10.854 47.637 36.952 215.635-91.17 364.341-56.778 65.651-140.185 106.951-233.24 106.974z',
              symbolSize: 15,
              tooltip: {
                show: true,
                formatter: function (params) {
                  return params.data.extraInfo
                },
                backgroundColor: "rgba(0,0,0,.6)",
                borderColor: "rgba(147, 235, 248, .8)",
                textStyle: {
                  color: "#FFF",
                },
              },
              label: {
                show: false,
                formatter: function (param) {
                  const data = param.data;
                  return `${data.name}`; 
                },
                position: 'top',
                color: 'gray', // #12E3AA-亮绿色  4CC7FF-蓝色 7E97FF-紫色 FFBF00-黄色 FF983F-橙色  FF6968-红色 EA7864-棕色
                fontSize: 8
              },
            },
          ],
        };
        }else{
          option = {
          title:{
            text: mapName, // 主标题
            left: '10px', // 标题水平位置
            top: '15px', // 标题垂直位置
            textStyle: { // 标题样式
              fontSize: 12,
              color: 'aqua'
            },
          },
          backgroundColor: "rgba(0,0,0,0)",
          tooltip: {
            show: false,
          },
          legend: {
            show: false,
          },
          visualMap: {
            show: showVMap,
            left: 20,
            bottom: 20,
            pieces: [
              { gte: 2000, label: "2000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
              { gte: 1000, lte: 2000, label: "1000-1999个" },
              { gte: 500, lte: 999, label: "500-999个" },
              { gte: 400, lte: 599, label: "400-599个" },
              { gte: 150, lte: 399, label: "159-399个" },
              { gte: 80, lte: 149, label: "80-149个" },
              { gte: 70, lte: 79, label: "79-79个" },
              { gte: 60, lte: 69, label: "60-69个" },
              { gte: 50, lte: 59, label: "50-59个" },
              { gte: 40, lte: 49, label: "40-49个" },
              { gte: 30, lte: 39, label: "30-39个" },
              { gte: 20, lte: 29, label: "20-29个" },
              { gte: 10, lte: 19, label: "10-19个" },
              { gte: 6, lte: 9, label: "6-9个" },
              { lte: 5, label: "0-5个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
            ],
            inRange: {
              // 渐变颜色，从小到大
              color: [
                "#ebf9fc",
                "#d7f2f8",
                "#c4ecf5",
                "#b0e6f2",
                "#9ce0ef",
                "#88d9eb",
                "#74d3e8",
                "#61cde5",
                "#4dc6e1",
                "#39c0de",
                "#33adc8",
                "#2e9ab2",
                "#28869b",
                "#227385",
                "#EE6666",
              ],
            },
            textStyle: {
              color: "aqua",
            },
          },
          geo: {
            map: name,
            roam: true,
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            top: top,
            // aspectScale: 0.78,
            show: false,
            itemStyle: {
              normal: {
                areaColor: '#eeeeee', // 默认区域颜色
                borderColor: '#404a59', // 区域边框颜色
                borderWidth: 1 // 区域边框宽度
              },
              emphasis: {
                areaColor: '#ffdf33' // 高亮区域颜色
              }
            }
          },
          series: [
            {
              name: "MAP",
              type: "map",
              roam: true,
              map: name,
              // aspectScale: 0.78,
              data: data,
              // data: [1,100],
              selectedMode: false, //是否允许选中多个区域
              zoom: zoom,
              geoIndex: 1,
              top: top,
              tooltip: {
                show: true,
                formatter: function (params) {
                  if (params.data) {
                    return "区域: "+params.name + "<br />客户数: " + params.data["value"]+" 人<br/>成交单数: "+params.data["orders"]+" 单<br/>成交金额: "+params.data["fee"]+" 元";
                  } else {
                    return params.name;
                  }
                },
                backgroundColor: "rgba(0,0,0,.6)",
                borderColor: "rgba(147, 235, 248, .8)",
                textStyle: {
                  color: "#FFF",
                },
              },
              label: {
                show: true,
                color: "green",
                // position: [-10, 0],
                formatter: function (val) {
                  if (val.data !== undefined) {
                    // return val.name.slice(0, 2)+"\n客户:"+val.value;
                    return [val.name.slice(0, 2),val.value].join(" ");
                  } else {
                    return "";
                  }
                },
                rich: {
                  
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
                itemStyle: {
                  areaColor: "yellow",
                  borderWidth: 1,
                },
              },
              itemStyle: {
                borderColor: "purple",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺为 false
                },
                shadowColor: "rgba(128, 217, 248, .3)",
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
            },
          ],
        };
        }
      }
      this.options = option;
    },
    message(text) {
      this.$Message({
        text: text,
        type: "warning",
      });
    },
    mapclick() {
      if (this.echartBindClick) return;
      //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
      this.$refs.CenterMap.chart.on("click", (params) => {
        if(params.seriesType=="scatter"){
          this.$emit('update-msg', params.data.name)
        }else{
          let xzqData = xzqCode[params.name];
          this.mapName = xzqData.name;
          this.mapLevel = xzqData.level;
          if (xzqData) {
            this.getData(xzqData.adcode);
          } else {
            this.message("暂无下级地市!");
          }
        }
      });
      this.echartBindClick = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;
    .quanguo {
      position: absolute;
      right: 190px;
      top: -46px;
      width: 50px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 5px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 3px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
    .quanguo2 {
      position: absolute;
      right: 130px;
      top: -46px;
      width: 50px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 5px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 3px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
    .quanguo1 {
      position: absolute;
      right: 70px;
      top: -46px;
      width: 50px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 5px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 3px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
    .quanguo0 {
      position: absolute;
      right: 10px;
      top: -46px;
      width: 50px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 5px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 3px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
